<template>
  <!-- 商品概况表格 -->
  <div class="item-list">
    <!-- 商品概况表格 -->
    <div class="ranking-right">
      <table class="table">
        <!-- 商品概况行 -->
        <tr>
          <td>
            <span style="font-size: 14px; font-weight:bold;color: black; margin-left:20px;">{{ $t('dataAnalysis.productsOverview') }}</span>
          </td>
          <td>
            <span class="font-set">{{ $t('dataAnalysis.goodsOnShelf') }}</span>
            <el-popover
              placement="top"
              width="200"
              trigger="hover"
              :content="$t('dataAnalysis.goodsStsContent')"
            >
              <template #reference>
                <el-icon class="question">
                  <QuestionFilled />
                </el-icon>
              </template>
            </el-popover>
            <br>
            <span style="font-size: 14px; font-weight:bold;color: black;">{{ prodData.data.onSale }}</span>
            <br>
            <span
              :class="['font-set',prodData.dateValue === 1 ? 'hidden':'']"
            >{{ [' -',' -',`${$t('dataAnalysis.compareWithThePrevious7Days')}`,`${$t('dataAnalysis.compareWithThePrevious30Days')}`,`${$t('dataAnalysis.compareWithThePreviousOneDay')}`,`${$t('dataAnalysis.compareWithThePreviousAMonth')}`][prodData.dateValue] }}</span>

            <img
              v-if="prodData.rate.onSaleRate < 0 && prodData.dateValue !== 1"
              src="~@/assets/img/downArrow.png"
              style="margin-bottom: 2px"
              width="8"
              height="10"
              alt=""
            >
            <img
              v-if="prodData.rate.onSaleRate > 0 && prodData.dateValue !== 1"
              src="~@/assets/img/upArrow.png"
              style="margin-bottom: 2px"
              width="8"
              height="10"
              alt=""
            >
            <span
              v-if="prodData.rate.onSaleRate !== 0 && prodData.dateValue !== 1"
              class="font-set"
              :class="[prodData.rate.onSaleRate > 0 ? 'font-green' : 'font-red']"
            >{{ filterRatio((prodData.rate.payNumRate * 100).toFixed(2)) }}</span>
          </td>
          <td>
            <span class="font-set">{{ $t('dataAnalysis.goodsVisited') }}</span>
            <el-popover
              placement="top"
              width="200"
              trigger="hover"
              :content="$t('dataAnalysis.prodSurveyTips3')"
            >
              <template #reference>
                <el-icon class="question">
                  <QuestionFilled />
                </el-icon>
              </template>
            </el-popover>
            <br>
            <span
              style="font-size: 14px; font-weight:bold;color: black;"
            >{{ prodData.data.visitedProd }}</span>
            <br>
            <span
              :class="['font-set',prodData.dateValue === 1 ? 'hidden':'']"
            >{{ [' -',' -',`${$t('dataAnalysis.compareWithThePrevious7Days')}`,`${$t('dataAnalysis.compareWithThePrevious30Days')}`,`${$t('dataAnalysis.compareWithThePreviousOneDay')}`,`${$t('dataAnalysis.compareWithThePreviousAMonth')}`][prodData.dateValue] }}</span>

            <img
              v-if="prodData.rate.visitedProdRate < 0 && prodData.dateValue !== 1"
              src="~@/assets/img/downArrow.png"
              style="margin-bottom: 2px"
              width="8"
              height="10"
              alt=""
            >
            <img
              v-if="prodData.rate.visitedProdRate > 0 && prodData.dateValue !== 1"
              src="~@/assets/img/upArrow.png"
              style="margin-bottom: 2px"
              width="8"
              height="10"
              alt=""
            >
            <span
              v-if="prodData.rate.visitedProdRate !== 0 && prodData.dateValue !== 1"
              class="font-set"
              :class="[prodData.rate.visitedProdRate > 0 ? 'font-green' : 'font-red']"
            >{{ filterRatio((prodData.rate.payNumRate * 100).toFixed(2)) }}</span>
          </td>
          <td>
            <span class="font-set">{{ $t('dataAnalysis.goodsSold') }}</span>
            <el-popover
              placement="top"
              width="200"
              trigger="hover"
              :content="$t('dataAnalysis.prodSurveyTips')"
            >
              <template #reference>
                <el-icon class="question">
                  <QuestionFilled />
                </el-icon>
              </template>
            </el-popover>
            <br>
            <span
              style="font-size: 14px; font-weight:bold;color: black;"
            >{{ prodData.data.dynamicSale }}</span>
            <br>
            <span
              :class="['font-set',prodData.dateValue === 1 ? 'hidden':'']"
            >{{ [' -',' -',`${$t('dataAnalysis.compareWithThePrevious7Days')}`,`${$t('dataAnalysis.compareWithThePrevious30Days')}`,`${$t('dataAnalysis.compareWithThePreviousOneDay')}`,`${$t('dataAnalysis.compareWithThePreviousAMonth')}`][prodData.dateValue] }}</span>

            <img
              v-if="prodData.rate.dynamicSaleRate < 0 && prodData.dateValue !== 1"
              src="~@/assets/img/downArrow.png"
              style="margin-bottom: 2px"
              width="8"
              height="10"
              alt=""
            >
            <img
              v-if="prodData.rate.dynamicSaleRate > 0 && prodData.dateValue !== 1"
              src="~@/assets/img/upArrow.png"
              style="margin-bottom: 2px"
              width="8"
              height="10"
              alt=""
            >
            <span
              v-if="prodData.rate.dynamicSaleRate !== 0 && prodData.dateValue !== 1"
              class="font-set"
              :class="[prodData.rate.dynamicSaleRate > 0 ? 'font-green' : 'font-red']"
            >{{ filterRatio((prodData.rate.payNumRate * 100).toFixed(2)) }}</span>
          </td>
        </tr>
        <!-- /商品概况行 -->
        <!-- 商品流量行 -->
        <tr>
          <td>
            <span style="font-size: 14px; font-weight:bold;color: black; margin-left:20px;">{{ $t('dataAnalysis.commodityFlow') }}</span>
          </td>
          <td>
            <span class="font-set">{{ $t('dataAnalysis.shareVisits') }}</span>
            <el-popover
              placement="top"
              width="200"
              trigger="hover"
              :content="$t('dataAnalysis.prodSurveyTips2')"
            >
              <template #reference>
                <el-icon class="question">
                  <QuestionFilled />
                </el-icon>
              </template>
            </el-popover>
            <br>
            <span style="font-size: 14px; font-weight:bold;color: black;">{{ prodData.data.shareVisit }}</span>
            <br>
            <span
              :class="['font-set',prodData.dateValue === 1 ? 'hidden':'']"
            >{{ [' -',' -',`${$t('dataAnalysis.compareWithThePrevious7Days')}`,`${$t('dataAnalysis.compareWithThePrevious30Days')}`,`${$t('dataAnalysis.compareWithThePreviousOneDay')}`,`${$t('dataAnalysis.compareWithThePreviousAMonth')}`][prodData.dateValue] }}</span>

            <img
              v-if="prodData.rate.shareVisitRate < 0 && prodData.dateValue !== 1"
              src="~@/assets/img/downArrow.png"
              style="margin-bottom: 2px"
              width="8"
              height="10"
              alt=""
            >
            <img
              v-if="prodData.rate.shareVisitRate > 0 && prodData.dateValue !== 1"
              src="~@/assets/img/upArrow.png"
              style="margin-bottom: 2px"
              width="8"
              height="10"
              alt=""
            >
            <span
              v-if="prodData.rate.shareVisitRate !== 0 && prodData.dateValue !== 1"
              class="font-set"
              :class="[prodData.rate.shareVisitRate > 0 ? 'font-green' : 'font-red']"
            >{{ filterRatio((prodData.rate.payNumRate * 100).toFixed(2)) }}</span>
          </td>
          <td>
            <span class="font-set">{{ $t('dataAnalysis.productViews') }}</span>
            <el-popover
              placement="top"
              width="200"
              trigger="hover"
              :content="$t('dataAnalysis.prodSurveyTips4')"
            >
              <template #reference>
                <el-icon class="question">
                  <QuestionFilled />
                </el-icon>
              </template>
            </el-popover>
            <br>
            <span style="font-size: 14px; font-weight:bold;color: black;">{{ prodData.data.browse }}</span>
            <br>
            <span
              :class="['font-set',prodData.dateValue === 1 ? 'hidden':'']"
            >{{ [' -',' -',`${$t('dataAnalysis.compareWithThePrevious7Days')}`,`${$t('dataAnalysis.compareWithThePrevious30Days')}`,`${$t('dataAnalysis.compareWithThePreviousOneDay')}`,`${$t('dataAnalysis.compareWithThePreviousAMonth')}`][prodData.dateValue] }}</span>

            <img
              v-if="prodData.rate.browseRate < 0 && prodData.dateValue !== 1"
              src="~@/assets/img/downArrow.png"
              style="margin-bottom: 2px"
              width="8"
              height="10"
              alt=""
            >
            <img
              v-if="prodData.rate.browseRate > 0 && prodData.dateValue !== 1"
              src="~@/assets/img/upArrow.png"
              style="margin-bottom: 2px"
              width="8"
              height="10"
              alt=""
            >
            <span
              v-if="prodData.rate.browseRate !== 0 && prodData.dateValue !== 1"
              class="font-set"
              :class="[prodData.rate.browseRate > 0 ? 'font-green' : 'font-red']"
            >{{ filterRatio((prodData.rate.payNumRate * 100).toFixed(2)) }}</span>
          </td>
          <td>
            <span class="font-set">{{ $t('dataAnalysis.productVisitors') }}</span>
            <el-popover
              placement="top"
              width="200"
              trigger="hover"
              :content="$t('dataAnalysis.prodSurveyTips5')"
            >
              <template #reference>
                <el-icon class="question">
                  <QuestionFilled />
                </el-icon>
              </template>
            </el-popover>
            <br>
            <span style="font-size: 14px; font-weight:bold;color: black;">{{ prodData.data.visitor }}</span>
            <br>
            <span
              :class="['font-set',prodData.dateValue === 1 ? 'hidden':'']"
            >{{ [' -',' -',`${$t('dataAnalysis.compareWithThePrevious7Days')} `,`${$t('dataAnalysis.compareWithThePrevious30Days')} `,`${$t('dataAnalysis.compareWithThePreviousOneDay')} `,`${$t('dataAnalysis.compareWithThePreviousAMonth')} `][prodData.dateValue] }}</span>

            <img
              v-if="prodData.rate.visitorRate < 0 && prodData.dateValue !== 1"
              src="~@/assets/img/downArrow.png"
              style="margin-bottom: 2px"
              width="8"
              height="10"
              alt=""
            >
            <img
              v-if="prodData.rate.visitorRate > 0 && prodData.dateValue !== 1"
              src="~@/assets/img/upArrow.png"
              style="margin-bottom: 2px"
              width="8"
              height="10"
              alt=""
            >
            <span
              v-if="prodData.rate.visitorRate !== 0 && prodData.dateValue !== 1"
              class="font-set"
              :class="[prodData.rate.visitorRate > 0 ? 'font-green' : 'font-red']"
            >{{ filterRatio((prodData.rate.payNumRate * 100).toFixed(2)) }}</span>
          </td>
        </tr>
        <!-- /商品流量行 -->
        <!-- 商品转换行 -->
        <tr>
          <td>
            <span style="font-size: 14px; font-weight:bold;color: black; margin-left:20px;">{{ $t('dataAnalysis.commodityConversion') }}</span>
          </td>
          <td>
            <span class="font-set">{{ $t('dataAnalysis.carNumbers') }}</span>
            <el-popover
              placement="top"
              width="200"
              trigger="hover"
              :content="$t('dataAnalysis.prodSurveyTips6')"
            >
              <template #reference>
                <el-icon class="question">
                  <QuestionFilled />
                </el-icon>
              </template>
            </el-popover>
            <br>
            <span style="font-size: 14px; font-weight:bold;color: black;">{{ prodData.data.addCart }}</span>
            <br>
            <span
              :class="['font-set',prodData.dateValue === 1 ? 'hidden':'']"
            >{{ [' -',' -',`${$t('dataAnalysis.compareWithThePrevious7Days')} `,`${$t('dataAnalysis.compareWithThePrevious30Days')} `,`${$t('dataAnalysis.compareWithThePreviousOneDay')} `,`${$t('dataAnalysis.compareWithThePreviousAMonth')} `][prodData.dateValue] }}</span>

            <img
              v-if="prodData.rate.addCartRate < 0 && prodData.dateValue !== 1"
              src="~@/assets/img/downArrow.png"
              style="margin-bottom: 2px"
              width="8"
              height="10"
              alt=""
            >
            <img
              v-if="prodData.rate.addCartRate > 0 && prodData.dateValue !== 1"
              src="~@/assets/img/upArrow.png"
              style="margin-bottom: 2px"
              width="8"
              height="10"
              alt=""
            >
            <span
              v-if="prodData.rate.addCartRate !== 0 && prodData.dateValue !== 1"
              class="font-set"
              :class="[prodData.rate.addCartRate > 0 ? 'font-green' : 'font-red']"
            >{{ filterRatio((prodData.rate.payNumRate * 100).toFixed(2)) }}</span>
          </td>
          <td>
            <span class="font-set">{{ $t('dataAnalysis.orderCounts') }}</span>
            <el-popover
              placement="top"
              width="200"
              trigger="hover"
              :content="$t('dataAnalysis.prodSurveyTips7')"
            >
              <template #reference>
                <el-icon class="question">
                  <QuestionFilled />
                </el-icon>
              </template>
            </el-popover>
            <br>
            <span style="font-size: 14px; font-weight:bold;color: black;">{{ prodData.data.orderNum }}</span>
            <br>
            <span
              :class="['font-set',prodData.dateValue === 1 ? 'hidden':'']"
            >{{ [' -',' -',`${$t('dataAnalysis.compareWithThePrevious7Days')} `,`${$t('dataAnalysis.compareWithThePrevious30Days')} `,`${$t('dataAnalysis.compareWithThePreviousOneDay')} `,`${$t('dataAnalysis.compareWithThePreviousAMonth')} `][prodData.dateValue] }}</span>

            <img
              v-if="prodData.rate.orderNumRate < 0 && prodData.dateValue !== 1"
              src="~@/assets/img/downArrow.png"
              style="margin-bottom: 2px"
              width="8"
              height="10"
              alt=""
            >
            <img
              v-if="prodData.rate.orderNumRate > 0 && prodData.dateValue !== 1"
              src="~@/assets/img/upArrow.png"
              style="margin-bottom: 2px"
              width="8"
              height="10"
              alt=""
            >
            <span
              v-if="prodData.rate.orderNumRate !== 0 && prodData.dateValue !== 1"
              class="font-set"
              :class="[prodData.rate.orderNumRate > 0 ? 'font-green' : 'font-red']"
            >{{ filterRatio((prodData.rate.payNumRate * 100).toFixed(2)) }}</span>
          </td>
          <td>
            <span class="font-set">{{ $t('dataAnalysis.payCounts') }}</span>
            <el-popover
              placement="top"
              width="200"
              trigger="hover"
              :content="$t('dataAnalysis.prodSurveyTips8')"
            >
              <template #reference>
                <el-icon class="question">
                  <QuestionFilled />
                </el-icon>
              </template>
            </el-popover>
            <br>
            <span style="font-size: 14px; font-weight:bold;color: black;">{{ prodData.data.payNum }}</span>
            <br>
            <span
              :class="['font-set',prodData.dateValue === 1 ? 'hidden':'']"
            >{{ [' -',' -',`${$t('dataAnalysis.compareWithThePrevious7Days')} `,`${$t('dataAnalysis.compareWithThePrevious30Days')} `,`${$t('dataAnalysis.compareWithThePreviousOneDay')} `,`${$t('dataAnalysis.compareWithThePreviousAMonth')} `][prodData.dateValue] }}</span>

            <img
              v-if="prodData.rate.payNumRate < 0 && prodData.dateValue !== 1"
              src="~@/assets/img/downArrow.png"
              style="margin-bottom: 2px"
              width="8"
              height="10"
              alt=""
            >
            <img
              v-if="prodData.rate.payNumRate > 0 && prodData.dateValue !== 1"
              src="~@/assets/img/upArrow.png"
              style="margin-bottom: 2px"
              width="8"
              height="10"
              alt=""
            >
            <span
              v-if="prodData.rate.payNumRate !== 0 && prodData.dateValue !== 1"
              class="font-set"
              :class="[prodData.rate.payNumRate > 0 ? 'font-green' : 'font-red']"
            >{{ filterRatio((prodData.rate.payNumRate * 100).toFixed(2)) }}</span>
          </td>
        </tr>
        <!-- /商品转换行 -->
      </table>
    </div>
    <!-- /商品概况表格 -->
  </div>
</template>

<script setup>
defineProps({
  prodData: {
    type: Object,
    default: null
  }
})
const filterRatio = (value) => {
  if (value < 0) {
    return value * -1 + '%'
  }
  return value + '%'
}

</script>
<style lang="scss" scoped>
.font-set {
  color: #666666;
  font-size: 12px;
  margin-right: 10px;
}
:deep(.el-icon-question) {
  color: #C8C9CC;
}
.font-green {
  color: #3CC480;
}
.font-red {
  color: #FF4141;
}

.hidden {
  visibility: hidden; // 不显示内容，但是需要占位
}
.table {
  border-collapse: collapse;
}
.table tr {
  margin: 5px 0;
  border-bottom: 1px whitesmoke solid; // 每一行表格的结束的分割线
  border-top: 1px #e7e7eb solid; // 每一行表格的结束的分割线
}

.table tr td {
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: left;
  line-height: 2em;
  width: 442px;
}
.table tr td span {
  margin-top: 0.5em;

}
.question{
  vertical-align: text-top;
  color: #c8c9cc;
}
</style>
